import { SchemaManage } from '@/components/SchemaComponent';
import React, { useMemo, useState } from 'react';
import { connect } from 'umi';
import { DelegateManageAPI } from '../common/type';
import { getTableColumns } from '../mconfig';
import { delegateTableManage } from '../services';
import { PlusOutlined } from '@ant-design/icons';
import { UpdateModal } from './UpdateModal';

const DelegateManageView: React.FC<DelegateManageAPI.IDelegateManageView> = ({
  curRes,
}) => {
  const delegateManageRef: any = React.useRef();

  const {
    getDelegateTabledData,
    data,
    loading,
    pagination,
    searchList,
    otherParams,
  } = delegateTableManage(curRes);

  /** 新增编辑弹框打开 */
  const [showUpdateModal, setShowUpdateModal] = useState<boolean>(false);

  /* 切换方法 */
  const onSwitch = (
    key: string | undefined | number,
    searchValues: any,
    params: any,
  ) => {
    if (key) {
      getDelegateTabledData({ ...params, ...searchValues });
    }
  };

  /**
   * 重置搜索表单方法
   */
  const onReset = (values: any) => {
    getDelegateTabledData({ ...otherParams, ...values });
  };

  /**
   * 搜索列表
   */
  const onSearch = (request: DelegateManageAPI.IGridRequestType) => {
    getDelegateTabledData({ ...otherParams, ...request });
  };

  /**
   * 分页change 方法
   */
  const onPageChange = (current: any, pageSize: any, params: any) => {
    getDelegateTabledData({ pageSize, current, ...params });
  };

  /**
   * 表格操作按钮点击方法
   */
  const onOptClick: DelegateManageAPI.IOperationClick = {
    onEdit: (resObj: Record<string, any>) => {},
    onDelete: (resObj: Record<string, any>) => {},
  };

  /**
   * 获取columns方法
   */
  const columns: Record<string, any>[] = React.useMemo(() => {
    return getTableColumns(curRes, onOptClick);
  }, [curRes]);

  /** 管理页面头部操作集合 */
  const tableActionList: DelegateManageAPI.IHeaderActionType = useMemo(() => {
    return [
      {
        title: '添加',
        visible: true,
        type: 'primary',
        icon: <PlusOutlined />,
        onClick: () => {
          setShowUpdateModal(true);
        },
      },
    ];
  }, [curRes]);

  return (
    <>
      <SchemaManage
        ref={delegateManageRef}
        searchProps={{
          switchList: [], //头部切换列表
          searchList, //搜索表单列表
          onReset, //重置
          onSwitch, //头部切换
          onSearch, //搜索方法
        }}
        actionList={tableActionList} //Table头部操作按钮列表
        tableProps={{
          // table 表格属性
          columns,
          dataSource: data?.rows,
          loading,
          pagination: pagination as any,
          rowKey: 'id',
          onPageChange, //分页change方法
        }}
      />

      {/* 新增编辑弹框 */}
      {showUpdateModal && (
        <UpdateModal
          visible={showUpdateModal}
          onClose={() => {
            setShowUpdateModal(false);
          }}
        />
      )}
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(DelegateManageView);
